<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Demo 1</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="gradient.css" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="../../src/gradient.color.picker.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#color1').gradientColorPicker( {
				showHexBox:true,
				bindOn:'click',
				cssPrefix: '',
				gradient: {                
					count: 16,
					useSingleColors:true,
					fadeTo:'right'
				}     
			}); 
			
			$('.colorme').gradientColorPicker( {
				showHexBox:false,
				bindOn:'click',
				cssPrefix: '',
				gradient: {                
					count: 16,
					useSingleColors:true,
					fadeTo:'left',
					colors:['616536', 'A4E666', '31B96E', '1B1112']
				}     
			}); 			
		});
	</script>
</head>

<body>
	<h1>Demo 1</h1>
	
	<form action="#" method="post">
		<fieldset>			
				<legend>16 gradient colors, single selection, fade to right</legend>
				<label for="color1">Color 1</label> 
				<input id="color1" type="text" name="color1" value="#333399"></input>
		</fieldset>      
		
		<fieldset>			
				<legend>16 gradient colors, single selection, fade to left</legend>
				<label for="color2">Color 2</label> 
				<input id="color2" class="colorme" type="text" name="color2" value="#000000"></input>
		</fieldset> 		
		
		<fieldset>			
				<legend>16 gradient colors, single selection, fade to left</legend>
				<label for="color3">Color 3</label> 
				<input id="color3" class="colorme" type="text" name="color3" value="#000000"></input>
		</fieldset> 		
	</form>	
</body>
</html>